<template>
	<view>
		<u-row>
			<image :src="cabinetInfo.merchant.showPic" style="width: 100%;height: 40vh;"></image>
		</u-row>
		<view style="padding-left: 40rpx;padding-right: 40rpx;">
			<u-row>
				<u-cell-group border="false">
					<u-cell iconStyle="margin-right: 40rpx;width: 80rpx;height: 80rpx;" icon="/static/mianya/address.png" :title="cabinetInfo.merchant.name"
						:isLink="false" :label="cabinetInfo.merchant.address"></u-cell>

					<u-cell iconStyle="margin-right: 40rpx;width: 80rpx;height: 80rpx;" icon="/static/mianya/price.png" title="价格"
						:isLink="false" :label="cabinetInfo.merchant.priceTemplate.info"></u-cell>
					<u-cell iconStyle="margin-right: 40rpx;width: 80rpx;height: 80rpx;" icon="/static/mianya/device_type.png" title="适配手机型号"
						:isLink="false" label="苹果,安卓,typeC"></u-cell>
				</u-cell-group>
			</u-row>
			<view v-if="cabinetInfo.deviceType == 1">
				<u-row customStyle="margin-top: 20rpx;">
					<button @click="zuJie" style="border-radius:10px;background-color:  #73de87;width: 100%;">
						免押租借
					</button>
				</u-row>
				<view style="margin-top: 20rpx;">
					<u--text size="12" prefixIcon="/static/mianya/we_pay.png"
						iconStyle="font-size: 25px;margin-right: 20rpx;" align="center" text="微信支付分500以上可申请"></u--text>
				</view>
			</view>
			<view v-else-if="cabinetInfo.deviceType == 2">
				<u-row customStyle="margin-top: 20rpx;">
					<button @click="submitOrder" style="border-radius:10px;background-color:  #73de87;width: 100%;">
						提交订单
					</button>
				</u-row>
			</view>			
			<view style="margin-top: 15rpx;display: flex;justify-content: center;">
				<view>
					<u-checkbox-group size="15" @change="checkboxChange" placement="row">
						<u-checkbox name="readXieYi" label="我已阅读并同意"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view>
					<u--text lineHeight="15" color="#73de87" size="15" text="用户协议"
						@click="gotoWeb('https://developers.weixin.qq.com/miniprogram/dev/framework/')"></u--text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	
	export default {
		data() {
			return {
				readXieYi: false,
				cabinetInfo:null,
			}
		},
		computed: {
		  ...mapState(['loginState'])
		},
		methods: {
			onLoad: async function (option) {
				if(option && option.cabinetNo){
					console.log("option",option)
					const cabinetNo = option.cabinetNo;
					this.cabinetInfo = await this.$http_api.merchantCabinetInfo({
						cabinetNo: cabinetNo
					});
					console.log("cabinetInfo:",this.cabinetInfo)
				}
			},
			gotoWeb: function(url) {
				uni.navigateTo({
					url: `/pages/webview/webview?url=${url}`
				})
			},
			checkboxChange(n) {
				console.log('radioChange', n);
				if (n.length > 0) {
					this.readXieYi = true;
				} else {
					this.readXieYi = false;
				}
			},
			zuJie(){
				if(!this.loginState){
					uni.navigateTo({
						url: `/pages/login/login?successUrl=/pages/mianya/mianya`
					});
					return;
				}
				if(!this.cabinetInfo){
					uni.$u.toast('未找到充电柜,请联系客服');
					return;
				}
				//进行免押逻辑
				this.$http_api.payWxScoreTrade({
					cabinetNo: this.cabinetInfo.cabinetNo,
				}).then((result)=>{
					console.log("payWxScoreTrade result:",result)
				});
				
			},
			submitOrder(){
				this.$http_api.ordersSubmitOrder({
					cabinetNo: this.cabinetInfo.cabinetNo,
				}).then((result)=>{
					console.log("ordersSubmitOrder result:",result)
				});
			}
		}
	}
</script>

<style>

</style>